<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

<body>
    <div class="modular">
        <!-- 第一个模块 -->
        <div class="advantage">
            <div class="advantage_box">
                <div class="container">
                    <div class="advantage_title">
                        <h2>OUR ADVATAGES</h2>
                        <div class="advantage_title_txt d-flex align-items-center">
                            <span></span>
                            <P>产品优势</P>
                            <span></span>
                        </div>
                    </div>
                    <div class="advantage_list">
                        <ul class="row">
                            <li class="col-lg-4 col-md-4 col-12">
                                <!--col-lg-4  原型  advantage_list_box-->
                                <!--col-lg-4  上下布局 advantage_list_down -->
                                <!--col-lg-6  左布局 advantage_list_left -->
                                <!--col-lg-6  右布局 advantage_list_right -->
                                <div class="advantage_list_box">
                                    <div class="advantage_list_img">
                                        <img src="img/ys1.png" alt="">
                                    </div>
                                    <div class="advantage_list_txt">
                                        <h4>研发优势</h4>
                                        <p>拥有研发技术人员30 余人，公司每年研发经费投入占比达4%，研发技术位列国内前茅</p>
                                    </div>
                                </div>
                            </li>
                            <li class="col-lg-4 col-md-4 col-12">
                                <div class="advantage_list_box">
                                    <div class="advantage_list_img">
                                        <img src="img/ys2.png" alt="">
                                    </div>
                                    <div class="advantage_list_txt">
                                        <h4>研发优势</h4>
                                        <p>拥有研发技术人员30 余人，公司每年研发经费投入占比达4%，研发技术位列国内前茅</p>
                                    </div>
                                </div>
                            </li>
                            <li class="col-lg-4 col-md-4 col-12">
                                <div class="advantage_list_box">
                                    <div class="advantage_list_img">
                                        <img src="img/ys3.png" alt="">
                                    </div>
                                    <div class="advantage_list_txt">
                                        <h4>研发优势</h4>
                                        <p>拥有研发技术人员30 余人，公司每年研发经费投入占比达4%，研发技术位列国内前茅</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第二个模块 -->
        <div class="case">
            <div class="case_box">
                <div class="container">
                    <div class="advantage_title">
                        <h2>CASE</h2>
                        <div class="advantage_title_txt d-flex align-items-center">
                            <span></span>
                            <P>工程案例</P>
                            <span></span>
                        </div>
                    </div>
                    <!--col-lg-4 原型case_list -->
                    <!--col-lg-4 上下布局case_list1 -->
                    <!--col-lg-6 左布局 case_list2-->
                    <!--col-lg-6 右布局 case_list3-->
                    <!-- col-lg-12 交互样式  case_list4-->
                    <div class="case_list4">
                        <ul class="row">
                            <li class="col-lg-12 col-md-12 col-12">
                                <div class="case_list_box">
                                    <div class="case_list_box_img">
                                        <img src="img/1.jpg" alt="">
                                    </div>
                                    <div class="case_list_box_txt">
                                        <h4>案例一</h4>
                                        <p>现代中式风格更多地利用了后现代手法，墙上挂一幅中国山水画等传统的书房里自然少不了书...</p>
                                        <a href="#">详情>></a>
                                    </div>
                                </div>
                            </li>
                            <li class="col-lg-12 col-md-12 col-12">
                                <div class="case_list_box">
                                    <div class="case_list_box_img">
                                        <img src="img/1.jpg" alt="">
                                    </div>
                                    <div class="case_list_box_txt">
                                        <h4>案例一</h4>
                                        <p>现代中式风格更多地利用了后现代手法，墙上挂一幅中国山水画等传统的书房里自然少不了书...</p>
                                        <a href="#">详情>></a>
                                    </div>
                                </div>
                            </li>
                            <li class="col-lg-12 col-md-12 col-12">
                                <div class="case_list_box">
                                    <div class="case_list_box_img">
                                        <img src="img/1.jpg" alt="">
                                    </div>
                                    <div class="case_list_box_txt">
                                        <h4>案例一</h4>
                                        <p>现代中式风格更多地利用了后现代手法，墙上挂一幅中国山水画等传统的书房里自然少不了书...</p>
                                        <a href="#">详情>></a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第三个模块 -->
        <div class="dynamic">
            <div class="container">
                <div class="advantage_title">
                    <h2>新闻动态</h2>
                    <div class="advantage_title_txt d-flex align-items-center">
                        <span></span>
                        <P>NEWSCENTER</P>
                        <span></span>
                    </div>
                </div>
                <!--col-lg-6 原型 dynamic_list-->
                <!--col-lg-6 上下样式 dynamic_list1 -->
                <!--col-lg-6 左样式 dynamic_list2 -->
                <!--col-lg-6 右样式 dynamic_list3 -->
                <!--col-lg-12 交互 dynamic_list4-->
                <div class="dynamic_list3">
                    <ul class="row">
                        <li class="col-lg-6 col-md-6 col-12">
                            <div class="dynamic_list_box">
                                <div class="dynamic_list_box_img">
                                    <img src="img/4.jpg" alt="">
                                </div>
                                <div class="dynamic_list_box_txt ">
                                    <h4>满京华喜悦里营销中心续单康福特户外家具</h4>
                                    <p>播种前精选种子，淘汰弱种，因弱种发芽率低，而且往往是病害的初侵染源。用0.5%的福尔马林液喷洒种子，拌匀后覆盖堆...</p>
                                </div>
                            </div>
                        </li>
                        <li class="col-lg-6 col-md-6 col-12">
                            <div class="dynamic_list_box">
                                <div class="dynamic_list_box_img">
                                    <img src="img/5.jpg" alt="">
                                </div>
                                <div class="dynamic_list_box_txt ">
                                    <h4>满京华喜悦里营销中心续单康福特户外家具</h4>
                                    <p>播种前精选种子，淘汰弱种，因弱种发芽率低，而且往往是病害的初侵染源。用0.5%的福尔马林液喷洒种子，拌匀后覆盖堆...</p>
                                </div>
                            </div>
                        </li>
                        <li class="col-lg-6 col-md-6 col-12">
                            <div class="dynamic_list_box">
                                <div class="dynamic_list_box_img">
                                    <img src="img/6.jpg" alt="">
                                </div>
                                <div class="dynamic_list_box_txt ">
                                    <h4>满京华喜悦里营销中心续单康福特户外家具</h4>
                                    <p>播种前精选种子，淘汰弱种，因弱种发芽率低，而且往往是病害的初侵染源。用0.5%的福尔马林液喷洒种子，拌匀后覆盖堆...</p>
                                </div>
                            </div>
                        </li>
                        <li class="col-lg-6 col-md-6 col-12">
                            <div class="dynamic_list_box">
                                <div class="dynamic_list_box_img">
                                    <img src="img/7.jpg" alt="">
                                </div>
                                <div class="dynamic_list_box_txt ">
                                    <h4>满京华喜悦里营销中心续单康福特户外家具</h4>
                                    <p>播种前精选种子，淘汰弱种，因弱种发芽率低，而且往往是病害的初侵染源。用0.5%的福尔马林液喷洒种子，拌匀后覆盖堆...</p>
                                </div>
                            </div>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
</body>

</html>